<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1,#box2{
            margin: 100px auto;
            width: 400px;
        }
        #box1>button,#box2>button{
            width: 80px;
            height: 30px;
            border: none;
        }
        #box1>div,#box2>div{
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            display: none;
        }
        #box1>button.active,#box2>button.active{
            background-color: #1de6b2;
        }
        #box1>div.active, #box2>div.active{
            display: block;
        }
    </style>
</head>
<body>

<script>
    window.onload = function () {
//        var oBox = document.querySelector("#box1")
//        var aBtn = oBox.querySelectorAll("button")
//        var aDiv = oBox.querySelectorAll("div")
//
//        for(let i=0;i<aBtn.length;i++){
//            aBtn[i].onclick = function () {
//                for(let i=0;i<aBtn.length;i++){
//                    aBtn[i].className = ""
//                    aDiv[i].style.display = "none"
//                }
//                this.className = "active"
//                aDiv[i].style.display = "block"
//
//            }
//        }
        var tab1 = new Tab("#box1")
        tab1.init()
        var tab1 = new Tab("#box2")
        tab1.init()
//        let tab1 = new  T
    }


    function Tab(id) {
        this.oBox = document.querySelector((id));
        this.aBtn = this.oBox.querySelectorAll("button")
        this.aDiv = this.oBox.querySelectorAll("div")

    }
    Tab.prototype.init = function () {
        for(var i = 0;i<this.aBtn.length;i++){
            this.aBtn[i].index = i
            var This = this
            this.aBtn[i].onclick = function () {
                This.changeTab(this)

            }
        }
    }
    Tab.prototype.changeTab = function (oBtn) {
        for(var i = 0;i<this.aBtn.length;i++){
            this.aBtn[i].className = ""
            this.aDiv[i].style.display = "none"
        }
        oBtn.className = "active"
        this.aDiv[oBtn.index].style.display = "block"

    }


</script>



<div id="box1">
    <button class="active">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <br>
    <div class="active">1111111111</div>
    <div>222222222</div>
    <div>3333333333</div>
</div>
<div id="box2">
    <button class="active">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <div class="active">内容1</div>
    <div>内容2</div>
    <div>内容3</div>
</div>

</body>
</html>